<!--
* 功能-页面实现
* Date: 2023-8-5
* Author: 徐富强
 -->
<template>
    <div style="position: relative">
        <transition-group name="left">
            <div v-show="visible" class="drawer drawerLeft" key="1">
                <div class="title">
                    <span>数据筛选</span>
                </div>
                <div class="content">
                    <FilterBar v-model="search" :close-collapse="true" :hasButton="true" :filters="trolleyOptionsRef"
                        @search-change="onSearch" @search-reset="onReset"
                        @on-toggle="(val: any) => $emit('on-toggle', val)" />
                </div>
                <div class="title">
                    <span>数据统计</span>
                    <div class="titleNumMsg">
                        <div class="num">
                            房屋数量
                            <span>{{ myTotal }}</span>
                        </div>
                    </div>
                    <div class="msgList">
                        <table-common :columns='exampleColumns' :loading='loading' :pagination='pager' :table-data='data'
                            @current-change='currentChange' @size-change='sizeChange' @sort-change='sortChange' height="500"
                            stripe @row-click="rowClick" :highlight-current-row="isHighLight">
                            <template #link>
                                <el-link @click="toHouseManger">查看完整信息>></el-link>
                            </template>
                        </table-common>
                    </div>
                </div>
            </div>
            <img :class="visible === true ? 'btn_a btnLeft btn' : 'btn_b btnLeft btn'"
                :src="visible === true ? image.arrowLeft : image.arrowRight" key="2" style="float: left"
                @click="visible = !visible" />
        </transition-group>
    </div>
    <map-control @mapLoad="mapLoadEvent" />
</template>

<script lang="ts" setup>

import FilterBar from '@/components/FilterBar/index.vue'
import { computed, ref, onBeforeMount, nextTick } from 'vue'
import router from '@/router'
import TableCommon from '@/components/TableCommon/index.vue'
import { exampleColumns } from '@/views/eqpt/houseAnalyse/config/columns'
import { trolleyOptions } from '@/views/eqpt/houseAnalyse/config/filters'
import { housePageList, PageListType } from '@/api/eqpt/houseAnalyse'
import { getResource } from '@/api/resource'
import { usePagination } from 'vue-request'
import { ElMessage } from 'element-plus'
// 以下3个为地图控件相关的组件
import mapControl from '@/components/map/index.vue'
import { store } from '@/components/map/mapStore'
import { image } from '@/assets/index'

// 搜索表单
const trolleyOptionsRef = ref(trolleyOptions)
const visible = ref(true)

const mapLoadEvent = () => {
  ElMessage.success('地图加载成功')
  textLayer = store.BNMap.creatGraphicsLayer({ id: 'text' })
  drawLayer = store.BNMap.creatGraphicsLayer({ id: 'demo' })
  getData()
}
const Service = () => {
  return new Promise(() => {
    //
  })
}
// 总页数
const myTotal = ref(0)
// 分页数据
const pager = computed(() => ({
  currentPage: current.value ? current.value : 1,
  pageSize: pageSize.value,
  total: myTotal.value,
  pageCount: Math.ceil(myTotal.value / pageSize.value) ? Math.ceil(myTotal.value / pageSize.value):1
}))
/**
 * 跳转到房屋管理
 */
const toHouseManger = () => {
  router.push('/eqpt/houseManger')
}
const {
  run,
  data,
  loading,
  current,
  pageSize,
  changeCurrent,
  changePageSize
} = usePagination(Service, {
  manual: true,
  pagination: {
    currentKey: 'pageNum',
    pageSizeKey: 'pageSize',
    totalKey: 'data.total'
  }
})
const search = ref<FilterDataType>({})
/**
 * 排序
 * @param value 排序规则
 */
const sortChange = (value) => {
  const sort = value.order?.slice(0, -6) || ''
  let order = []
  if (value.prop === 'houseCode') {
    order = [{ column: 'house_code', method: sort }]
  } else if (value.prop === 'state') {
    order = [{ column: 'state', method: sort }]
  }
  search.value.order = order
  getData()
}
/**
* 变更当前页面
*/
const currentChange = (currentPage) => {
  changeCurrent(currentPage)
  getData()
}
/*
* 变更页面数据条数
*/
const sizeChange = (pageSize) => {
  changePageSize(pageSize)
  getData()
}
/*
* 查询
*/
const onSearch = (v) => {
  search.value = v
  getData()
}
/**
 * 清空
 */
const onReset = () => {
  changeCurrent(1)
  myTotal.value = 0
  search.value = ''
  getData()
}
// 房屋id
const rowFocusId = ref(0)
// 行是否高亮显示
const isHighLight = ref(true)
/**
 * 功能-计算不规则图形质点
 */
const Area = (p0, p1, p2) => {
  let area = 0.0
  area = p0[0] * p1[1] + p1[0] * p2[1] + p2[0] * p0[1] - p1[0] * p0[1] - p2[0] * p1[1] - p0[0] * p2[1]
  return area / 2
}
/**
 * 功能-计算不规则图形质点
 * @param points 面的各顶点坐标
 */
const getPolygonAreaCenter = (points) => {
  let sumX = 0
  let sumY = 0
  let sumArea = 0
  let p1 = points[1]
  for (let i = 2; i < points.length; i++) {
    const p2 = points[i]
    const isArea = Area(points[0], p1, p2)
    sumArea += isArea
    sumX += (points[0][0] + p1[0] + p2[0]) * isArea
    sumY += (points[0][1] + p1[1] + p2[1]) * isArea
    p1 = p2
  }
  const xx = sumX / sumArea / 3
  const yy = sumY / sumArea / 3
  return [xx, yy]
}
/**
 * 点击回显房屋
 */
const rowClick = (row) => {
  if (rowFocusId.value === row.houseId) {
    rowFocusId.value = 0
    isHighLight.value = false
    store.BNWindows.hide()
    let laseSectorsym
    if (lastLayer.state === '1') {
      laseSectorsym = store.BNSymbol.polygonSymbol(
        'solid',
        store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
        '#bad4fb'
      )
    } else {
      laseSectorsym = store.BNSymbol.polygonSymbol(
        'solid',
        store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
        '#f8f8f8'
      )
    }
    const getGraphicsLayer = totalGraphic.filter(item => {
      return item.id === lastLayer.draw
    })
    getGraphicsLayer[0].sectorGrp.symbol = laseSectorsym
  } else {
    rowFocusId.value = row.houseId
    isHighLight.value = true
    if (lastLayer.draw !== '') {
      let laseSectorsym
      if (lastLayer.state === '1') {
        laseSectorsym = store.BNSymbol.polygonSymbol(
          'solid',
          store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
          '#bad4fb'
        )
      } else {
        laseSectorsym = store.BNSymbol.polygonSymbol(
          'solid',
          store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
          '#f8f8f8'
        )
      }
      const getGraphicsLayer = totalGraphic.filter(item => {
        return item.id === lastLayer.draw
      })
      getGraphicsLayer[0].sectorGrp.symbol = laseSectorsym
    }
    let sectorsym
    const hightLine = store.BNSymbol.simpleLineSymbol('solid', '#f59f2e', 1)
    // eslint-disable-next-line prefer-const
    sectorsym = store.BNSymbol.polygonSymbol('solid', hightLine, '#fbdbb0')

    const getGraphicsLayer = totalGraphic.filter(item => {
      return item.id === row.houseId
    })
    const sectorGrp = getGraphicsLayer[0].sectorGrp
    sectorGrp.symbol = sectorsym

    const center = getCenterByGeometry(sectorGrp.geometry)
    // 设置图层中心点为地图中心点
    store.BNMap.setCenter(center.x - 200, center.y)
    // // 赋值临时图层信息
    lastLayer.draw = row.houseId
    lastLayer.state = row.state

    // 弹窗显示内容
    let coordinate = '('
    row.coordinate.forEach(item => {
      coordinate = coordinate + item[0] + ',' + item[1] + ','
    })
    coordinate = coordinate.slice(0, -1)
    coordinate += ')'
    coordinate = coordinate.slice(0, 14) + '...'

    const state = row.state === '1' ? '使用中' : '已废弃'

    const html = '<table>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>名称:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.houseName || '-') + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>类别:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.houseType || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>编号:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.houseCode || '-') + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>数量:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.num || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>面积(㎡):</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.area || '-') + "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>单价(万):</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.price || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>月租金(元):</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.rent || '-') + "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>区域:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.region || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>地图坐标:</td><td style='text-align:left;padding-left:15px;background-color:#F4F7FC;max-width:120px;overflow:hidden !important;white-space: nowrap;text-overflow: ellipsis;'>" + (coordinate || '-') + "</td>  <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>使用单位:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.organNames || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状况:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.condition || '-') + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>性质:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.nature || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>功能:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.ability || '-') + "</td>                                                      <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维保年限:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.maintainLimit || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>责任单位:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.dutyOrganName || '-') + "</td>                                                <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>联系人:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (row.linkUserName || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>联系电话:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.linkPhone || '-') + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>楼层:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + (row.floor || '-') + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状态 :</td>   <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + (state || '-') + '</td></tr>' + "</table style='color: #aaa;width:80px'>"
    // 设置弹窗内容
    store.BNWindows.setTitle('房屋基本信息')
    store.BNWindows.setContent(html)
    // 设置弹窗大小
    store.BNWindows.resize(280, 360)
    const point = getPolygonAreaCenter(row.coordinate)
    const mapPoint = store.BNMap.createPoint({ x: point[0], y: point[1], spatialReference: store.BNMap.spatialReference })
    store.BNWindows.show(mapPoint)
  }
}
let lastLayer = { draw: '', state: '' }
// 总要素图层 {id:data.houseId,sectorGrp:sectorGrp,testGrp:testGrp}
let totalGraphic = []
// 创建文字图层
let textLayer
let drawLayer
/**
 * 绘制图形
 * @param val 地图坐标
 * @param data 房屋数据
 */
const drawAreaOnMap = (data) => {
  if (!Array.isArray(data.coordinate)) {
    ElMessage.error(data.houseName + '房屋区域数据有误')
    return
  }

  const coordinate = []
  data.coordinate.forEach(item => {
    coordinate.push([item.latitude, item.longitude])
  })
  data.coordinate = coordinate
  // 定义高亮样式
  const hightLine = store.BNSymbol.simpleLineSymbol('solid', '#f59f2e', 1)
  const hightSymbol = store.BNSymbol.polygonSymbol('solid', hightLine, '#fbdbb0')
  const font = {
    size: 14,
    weight: 'bold'
  }
  const textSymbol = store.BNSymbol.textSymbol(data.houseName, font, '#fff')// 字体符号
  // 要素图层
  const polygon = store.BNGeometry.createPolygon({
    rings: data.coordinate,
    spatialReference: store.BNMap.spatialReference
  })
  let sectorsym
  if (data.state === '1') {
    sectorsym = store.BNSymbol.polygonSymbol(
      'solid',
      store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
      '#bad4fb'
    )
  } else {
    sectorsym = store.BNSymbol.polygonSymbol(
      'solid',
      store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
      '#f8f8f8'
    )
  }

  // 绘制颜色层内容
  const sectorGrp = store.BNMap.graphic(polygon, sectorsym)
  // 绘制文字层内容
  const testGrp = store.BNMap.graphic(polygon, textSymbol)
  sectorGrp.attributes = {
    houseName: data.houseName || '-',
    houseType: data.houseType || '-',
    houseCode: data.houseCode || '-',
    num: data.num || '-',
    area: data.area || '-',
    price: data.price || '-',
    rent: data.rent || '-',
    region: data.region || '-',
    coordinate: data.coordinate || '-',
    organNames: data.organNames || '-',
    condition: data.condition || '-',
    nature: data.nature || '-',
    ability: data.ability || '-',
    maintainLimit: data.maintainLimit || '-',
    dutyOrganName: data.dutyOrganName || '-',
    linkUserName: data.linkUserName || '-',
    linkPhone: data.linkPhone || '-',
    floor: data.floor || '-',
    state: data.state || '-',
    houseId: data.houseId
  }

  totalGraphic.push({ id: data.houseId, sectorGrp, testGrp })
  textLayer.add(testGrp)
  drawLayer.add(sectorGrp)
  // 创建窗体
  store.BNMap.bindEvent(drawLayer, 'click', function (evt) {
    if (evt.clickResult !== null) {
      // drawLayer 为当前所操作的图层名称，保持和自己定义的图层名称一致
      if (lastLayer.draw !== '') {
        let sectorsym
        if (lastLayer.draw !== evt.clickResult.results[1].graphic.attributes.houseId) {
          if (lastLayer.state === '1') {
            sectorsym = store.BNSymbol.polygonSymbol(
              'solid',
              store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
              '#bad4fb'
            )
          } else {
            sectorsym = store.BNSymbol.polygonSymbol(
              'solid',
              store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
              '#f8f8f8'
            )
          }
          const getGraphicsLayer = totalGraphic.filter(item => {
            return item.id === lastLayer.draw
          })
          getGraphicsLayer[0].sectorGrp.symbol = sectorsym
        }
      }
      const myLayer = evt.clickResult.results[1]
      // // 赋值临时图层信息
      const tempGraphic = myLayer.graphic
      lastLayer.draw = myLayer.graphic.attributes.houseId
      lastLayer.state = myLayer.graphic.attributes.state
      tempGraphic.symbol = hightSymbol
      // 弹窗显示内容
      let coordinate = '('
      data.coordinate.forEach(item => {
        coordinate = coordinate + item[0] + ',' + item[1] + ','
      })
      coordinate = coordinate.slice(0, -1)
      coordinate += ')'
      coordinate = coordinate.slice(0, 14) + '...'

      const state = myLayer.graphic.attributes.state === '1' ? '使用中' : '已废弃'
      const html = '<table>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>名称:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.houseName + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>类别:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.houseType + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>编号:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.houseCode + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>数量:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.num + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>面积(㎡):</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.area + "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>单价:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.price + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>月租金:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.rent + "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>区域:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.region + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>地图坐标:</td><td style='text-align:left;padding-left:15px;background-color:#F4F7FC;max-width:120px;overflow:hidden !important;white-space: nowrap;text-overflow: ellipsis;'>" + coordinate + "</td>  <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>使用单位:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.organNames + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状况:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.condition + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>性质:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.nature + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>功能:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.ability + "</td>                                                      <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维保年限:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.maintainLimit + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>责任单位:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.dutyOrganName + "</td>                                                <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>联系人:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.linkUserName + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>联系电话:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.linkPhone + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>楼层:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.floor + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状态 :</td>   <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + state + '</td></tr>' + "</table style='color: #aaa;width:80px'>"
      // 设置弹窗内容padding-right:10px;
      store.BNWindows.setTitle('房屋基本信息')
      store.BNWindows.setContent(html)
      // 设置弹窗大小
      store.BNWindows.resize(280, 360)
      store.BNWindows.show(evt.mapPoint)
    }
  })
}

/**
 * 通过geometry获取中心点
 * @param geometryArgs 范围
 * @returns 经纬度点对象
 */
const getCenterByGeometry = (geometryArgs: any) => {
  // 创建中心点对象
  const centerObject = {}
  // 得到当前要素的上、下、左、右偏移量
  const rings = geometryArgs.rings[0]
  if (rings.length % 2 === 0) {
    centerObject.x = rings[rings.length / 2][0]
    centerObject.y = rings[rings.length / 2][1]
  } else {
    centerObject.x = rings[(rings.length + 1) / 2][0]
    centerObject.y = rings[(rings.length + 1) / 2][1]
  }
  // 返回中心点
  return centerObject
}

/**
 * 获取数据
 */
const getData = async () => {
  loading.value = true
  const payload: PageListType = {
    pageNum: pager.value.currentPage,
    pageSize: pager.value.pageSize,
    condition: {
    }
  }
  // 排序
  if (search.value.order) {
    payload.condition.order = search.value.order
  }
  // 搜索
  if (search.value.state) {
    payload.condition.state = search.value.state
  }
  if (search.value.region) {
    payload.condition.region = search.value.region
  }
  // 渲染 区域、类别、功能、性质
  const res = await housePageList(payload)
  const res1 = await getResource('house_region')
  const res2 = await getResource('house_category')
  const res3 = await getResource('house_ability')
  const res4 = await getResource('house_nature')
  lastLayer = { draw: '', state: '' }
  totalGraphic = []
  store.BNWindows.hide()
  drawLayer.removeAll()
  textLayer.removeAll()
  res.data.list.forEach((item) => {
    for (const i of res1.data.properties.meta) {
      if (i.value === item.region) {
        item.region = i.label
      }
    }
    for (const i of res2.data.properties.meta) {
      if (i.value === item.houseType) {
        item.houseType = i.label
      }
    }
    for (const i of res3.data.properties.meta) {
      if (i.value === item.ability) {
        item.ability = i.label
      }
    }
    for (const i of res4.data.properties.meta) {
      if (i.value === item.nature) {
        item.nature = i.label
      }
    }
    drawAreaOnMap(item)
  })
  nextTick(() => {
    store.BNMap.addGraphicsLayer(drawLayer)
    // 后加入文字图层，避免被颜色图层覆盖
    store.BNMap.addGraphicsLayer(textLayer)
  })
  data.value = res.data.list
  changeCurrent(res.data.pageNum)
  changePageSize(res.data.pageSize)
  myTotal.value = res.data.total
  const params = {
    pageNum: current.value,
    pageSize: pageSize.value,
    condition: search.value
  }

  run(params)
  loading.value = false
}
/**
 * 获取搜索下拉框区域字典
 */
const getRegion = async () => {
  const res = await getResource('house_region')
  trolleyOptionsRef.value[1].inputProps.options = res.data.properties.meta
  trolleyOptionsRef.value[1].inputProps.options.unshift({ label: '全部', value: '' })
}
// onBeforeMount(getData)
onBeforeMount(getRegion)
</script>
<style lang="less" scoped>
/* 进入动画 */
.main-view {
  &::-webkit-scrollbar {
    display: none;
  }
}
.dialog {
  pointer-events: none;
}
.dialog /deep/ .el-dialog {
  pointer-events: auto;
  position: absolute;
  left: 640px;
  top: 140px;
}

/* 进入动画 */
.left-enter-active {
  animation: move 1s;
  animation-timing-function: linear;
}
.left-leave-active {
  animation: move 1s reverse;
  animation-timing-function: linear;
}

@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translate(0);
  }
}
.right-enter-active {
  animation: move-right 1s;
  animation-timing-function: linear;
}
.right-leave-active {
  animation: move-right 1s reverse;
  animation-timing-function: linear;
}

@keyframes move-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translate(0);
  }
}
.drawer {
  height: 800px;
  padding: 10px 0;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
}
.drawerRight {
  width: 400px;
  position: absolute;
  top: 0;
  right: 10px;
}
.drawerLeft {
  width: 670px;
  position: absolute;
  top: 0;
  left: 0;
}
.drawer>.title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;
  span {
    margin-left: 5px;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    border-left: #2F7DF1 3px solid;
    font-weight:bolder;
    text-indent: 1em;
  }
  .newArea {
    float: right;
  }
  .titleNumMsg {
    text-indent: 1em;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    display: block;
    .num {
      display: inline-block;
      float: left;
      padding-right: 9px;
      span {
        text-indent: 5px;
        height: 20px;
        margin-top: -3px;
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        line-height: 20px;
        font-weight: bolder;
        border: 0;
        color: #2F7DF1;
      }
    }
    .num:not(:first-child) {
      border-left: 1px solid #DDD;
    }
  }
}
.dialog {
  /deep/ .el-form-item__label {
    text-align: left;
    width: 130px !important;
  }
}
.drawer>.content {
  line-height: 32px;
  height: 50px;
  margin-bottom: 10px;
  padding: 0 10px 10px;
  position: relative;
  /deep/ .el-form-item__label {
    text-align: right;
    margin-right: 10px;
    width: 75px !important;
    padding: 0;
    display: inline-block;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
  /deep/ .filter-wrapper {
    display: inline-block;
  }
  /deep/ .button-group {
    width: 200px;
    position: absolute;
    top: 40px;
    right: 35px;
  }
}
.alamList {
  padding: 15px 0 15px 15px;
  height: 580px
}
.msgList {
  padding: 15px 0 15px 15px;
  overflow-y: scroll;
  height: 580px
}
.msgList::-webkit-scrollbar {
  display: none;
}
.listDiv {
  border: #D7D7D7 1px solid;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 120px;
  overflow-y: hidden;
  margin-bottom: 10px;
  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }
  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }
  .top span img {
    margin-top: 2px;
  }
  .top span:first-child {
    font-weight: bolder;
    text-indent: 2px;
    text-align: left;
  }
  .top span:last-child {
    float: right;
    text-align: right;
  }
  .list {
    line-height: 14px;
    max-height: 60px;
    overflow-y: scroll;
  }
  .list::-webkit-scrollbar {
    display: none;
  }
  .msg {
    color: #AAA;
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
}
.subLayer {
  position: absolute;
  width: 35px;
  top: 50px;
  border: 0;
}
.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #FFF solid;
  padding: 10px;
}
.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}
.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}
.mapLegend {
  padding: 10px;
  width: 145px;
  background: #FFF;
  border-radius: 8px;
  position: absolute;
  transition: right 1s;
  font-size: 12px;
  transition-timing-function: linear;
  .sw {
    margin-top: 5px;
  }
  div {
    margin-bottom: 8px;
    line-height: 24px;
    .legend {
      float: right;
      border-radius: 4px;
      width: 62px;
      height: 22px;
    }
    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }
    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: red;
      width: 20px;
      height: 20px;
    }
  }
  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }
  span:first-child {
    font-weight: bolder;
    width: 60px;
    margin-top: 2px;
    border-left: 2px solid #2F7DF1;
    text-indent: 10px;
  }
}
.mapLegend_a {
  height: 150px;
  right: 420px;
  top: calc(74vh - 22px);
}
.mapLegend_b {
  height: 190px;
  right: 10px;
  top: calc(70vh - 22px);
}
.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.btn {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #FFF;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
  object-fit: none;
}
.btnRight {
  border-radius: 8px 0 0 8px;
  transition: right 1s;
  transition-timing-function: linear;
}
.btn_e {
  right: 0;
}
.btn_f {
  right: 410px;
}
.btnLeft {
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.btn_d {
  animation: move 0s reverse;
  left: 690px;
}
.btn_c {
  animation: move 0s reverse;
  left: 10px;
}
.btn_b {
  left: 0;
}
.btn_a {
  left: 680px;
}
</style>
